<template>
	<view class="evaluation_con">
		<view class="top">
			<image src="/static/images/evaluationBanner.png"></image>
			<view class="info">
				<view>香薷中医体检</view>
				<view>国医大师携手数百位专家倾力打造</view>
			</view>
		</view>
		<view class="section">
			<view class="content">
				<view class="progress_con">
					<view class="title">当前进度</view>
					<view class="bgWidth"></view>
					<view class="rate">1%</view>
				</view>
				<view class="form">
					<view class="ruleForm1" v-if="isForm == 0">
						<view class="list">
							<view class="lable"><span>*</span>姓名</view>
							<view class="input_box">
								<u-input :border="false" type="number" v-model="username" style="width:70%;height:100%;"></u-input>
							</view>
						</view>
						<view class="list">
							<view class="lable"><span>*</span>性别</view>
							<view class="input_box">
								<u-input :border="false" type="number" v-model="sex" style="width:70%;height:100%;"></u-input>
							</view>
						</view>
						<view class="list">
							<view class="lable"><span>*</span>年龄</view>
							<view class="input_box">
								<u-input :border="false" type="number" v-model="age" style="width:70%;height:100%;"></u-input>
							</view>
						</view>
						<view class="list">
							<view class="lable">工作单位</view>
							<view class="input_box">
								<u-input :border="false" type="number" v-model="job" style="width:70%;height:100%;"></u-input>
							</view>
						</view>
					</view>
					<view class="ruleForm2" v-if="isForm == 1">	
						<view class="title">请明显感到(多选):</view>
						<view class="text">在症状明显栏目选中，没有可空着不填</view>
						<view class="list" :class="{listActive:current==0}" @click="current = 0">头晕</view>
						<view class="list" :class="{listActive:current==1}" @click="current = 1">头沉</view>
						<view class="list" :class="{listActive:current==2}" @click="current = 2">头痛</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view v-if="isForm == 0" class="btn" @click="next()">下一页</view>
			<view v-if="isForm == 1" class="submit">
				<view class="back" @click="back()">上一页</view>
				<view class="next" @click="next()">下一页</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isForm:0,
				current:0
			}
		},
		methods:{
			next(){
				this.isForm++
			},
			back(){
				if(this.isForm == 0){
					return
				}
				this.isForm--
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluation_con{
		width:100%;
		height:100%;
		background: #F8F8F8;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		.top{
			height:425rpx;
			position: relative;
			width:100%;
			image{
				position: absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
			}
			.info{
				position: absolute;
				top:100rpx;
				left:30rpx;
				view{
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-bottom: 20rpx;
				}
			}
		}
		.section{
			padding:0 30rpx;
			position: absolute;
			top:240rpx;
			width:100%;
			.content{
				background: #FFFFFF;
				border-radius: 18rpx;
				padding: 53rpx;
				.progress_con{
					display: flex;
					align-items: center;
					gap: 20rpx;
					margin-bottom: 40rpx;
					.title{
						
						font-weight: 500;
						font-size: 26rpx;
						color: #666666;
					}
					.bgWidth{
						flex:1;
						height:9rpx;
						background: #F4F4F4;
						border-radius: 50rpx;
					}
					.rate{
						font-weight: 400;
						font-size: 30rpx;
						color: #000000;
					}
				}
				.form{
					.ruleForm1{
						.list{
							margin-bottom: 25rpx;
							.lable{
								display: flex;
								margin-bottom: 24rpx;
								span{
									color:#7D2527;
									font-weight: 500;
									font-size: 30rpx;
									color: #7D2527;
									margin-bottom: 24rpx;
								}
							}
							.input_box{
								width:100%;
								height:62rpx;
								background: #F4F4F4;
								border-radius: 50rpx;
								padding: 0 20rpx;
							}
						}
					}
					.ruleForm2{
						.title{
							font-weight: 500;
							font-size: 30rpx;
							color: #000000;
							margin-bottom: 10rpx;
						}
						.text{
							font-weight: 500;
							font-size: 26rpx;
							color: #999999;
							margin-bottom: 44rpx;
						}
						.list{
							width:100%;
							height:62rpx;
							line-height: 62rpx;
							background: #F4F4F4;
							border-radius: 50rpx;
							border:1px solid #F4F4F4;
							font-weight: 500;
							font-size: 30rpx;
							color: #000000;
							padding-left: 30rpx;
							margin-bottom: 70rpx;
						}
						.listActive{
							border: 1px solid #7D2527;
						}
					}
				}
			}
			
		}
		.bottom{
			position: fixed;
			bottom: 80rpx;
			width:100%;
			padding: 0 30rpx;
			.btn{
				width:100%;
				text-align: center;
				height:80rpx;
				line-height: 80rpx;
				background: #7D2527;
				border-radius: 50rpx;
				color:#fff;
				font-size: 40rpx;
			}
			.submit{
				display: flex;
				justify-content: space-between;
				gap: 30rpx;
				view{
					flex: 1;
					text-align: center;
					height:80rpx;
					line-height: 80rpx;
					border-radius: 50rpx;
					font-size: 36rpx;
				}
				.back{
					border: 1px solid #7D2527;
					color:#7D2527;
				}
				.next{
					background: #7D2527;
					color:#fff;
				}
			}
		}
	}
</style>